<template>
    <div>
        <el-container>
            <!--   侧边栏   -->
            <el-aside :width="asideWidth" style="min-height: 100vh;background-color: #001529">
                <div style="height: 60px; display: flex; color: white;justify-content: center;align-items: center">
                    <img src="@/assets/logo1.png" alt="logo1" style="height: 40px; width: 40px" />
                    <span class="logo-title" v-show="!isCollapse">2024</span>
                </div>

                <el-menu :default-active="$route.path" :collapse="isCollapse" :collapse-transition="false" router text-color="rgba(255,255,255,0.65)"  active-text-color="#fff" style="border: none;background-color: #001529" >
                    <el-menu-item index="/home">
                        <i class="el-icon-menu"></i>
                        <span slot="title">系统首页</span>
                    </el-menu-item>
                    <el-submenu index="info">
                        <template slot="title" >
                            <i class="el-icon-menu"></i>
                            <span>信息管理</span>
                        </template>
                        <el-menu-item index="/user">用户信息</el-menu-item>
                        <el-menu-item index="/role">角色管理</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <!--   头部区域   -->
                <el-header>
                    <i :class="collapseIcon" style="font-size: 26px;" @click="handleCollapse"></i>
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>
                    </el-breadcrumb>

                    <div style="flex: 1;width: 0;display: flex;align-items: center;justify-content: flex-end">
                        <i class="el-icon-quanping" style="font-size: 26px" @click="handleFull"></i>
                        <el-dropdown placement="bottom">
                            <div style="display: flex; align-items: center;cursor: default">
                                <img src="@/assets/logo1.png" alt="logo1" style="height: 40px; width: 40px;margin: 0 5px" />
                                <span>管理员</span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>个人信息</el-dropdown-item>
                                <el-dropdown-item>修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                </el-header>

                <!--    主体区域    -->
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import router from "@/router";

    export default {
        name: 'HomeView',
        data(){
            return {
                isCollapse: false,
                loading: false,
                asideWidth: '200px',
                collapseIcon: 'el-icon-s-fold',
            }
        },
        mounted() {
            this.$request.get('/user/selectAll').then(res=>{
                if (res.code==='200') {
                    // console.log(res)
                    this.users = res.data
                }

            })
        },
        methods:{
            // 头像下载
            avatardownload(url){
                window.open(url)
            },
            handleAvatarUpload(row, response, file, fileList){
                console.log(row, response, file, fileList)

                // 保存到数据库中
                row.avatar = response.data

                this.$request.put('/user/update', row).then(res=>{
                    if (res.code==='200') {
                        this.$message.success("上传成功")
                    } else {
                        this.$message.error(res.msg)
                    }
                })

            },
            logout(){
              // 清除my-user
                localStorage.removeItem('my-user')

              // 跳转到登录页
                router.push('/login')
            },
            handleFull(){
                document.documentElement.requestFullscreen()
            },
            handleCollapse(){
                this.isCollapse = !this.isCollapse
                this.asideWidth = this.isCollapse ? '64px' : '200px'
                this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
            }
        }
    }
</script>

<style>
    .el-menu--inline{
        background-color: #000c17 !important;
    }

    .el-menu--inline .el-menu-item {
        background-color: #000c17 !important;
        padding-left: 49px !important;
    }

    .el-menu-item:hover .el-submenu__title:hover {
        color: #fff !important;
    }

    .el-submenu__title:hover i {
        color: #fff !important;
    }

    .el-menu-item.is-active {
        background-color: #1890ff !important;
        border-radius: 5px !important;
        width: calc(100% - 8px);
        margin-left: 4px;
    }

    .el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip {
        margin-left: -4px ;
    }

    .el-menu-item i {
        font-size: 18px;
        margin-right: 10px;
        vertical-align: middle;
    }

    .el-menu-item {
        height: 40px !important;
        line-height: 40px !important;
    }

    .el-submenu__title{
        height: 40px !important;
        line-height: 40px !important;
    }

    .el-submenu .el-menu-item{
        min-width: 0 !important;
    }

    .el-menu--inline .el-menu-item.is-active {
        /*padding: 45px !important;*/
    }

    .el-aside{
        transition: width .3s;
        box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
    }

    .logo-title{
        margin-left: 5px;
        font-size: 20px;
        transition: all .3s;
    }

    .el-header{
        display: flex;
        align-items: center;
        box-shadow: 2px 0 6px rgba(0, 21, 41, .35);

    }

    .el-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .el-dropdown div {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
    }

    .el-dropdown-menu {
        background-color: #001529 !important;
        color: white !important;
    }

    .el-dropdown-menu .el-dropdown-item {
        color: white !important;
    }
</style>